<template>
  <div class="article-skeleton box-radius">
    <div class="skeleton-header">
      <div class="skeleton-title"></div>
      <div class="skeleton-meta">
        <div class="skeleton-tag"></div>
        <div class="skeleton-date"></div>
      </div>
    </div>
    <div class="skeleton-content">
      <div class="skeleton-text"></div>
      <div class="skeleton-text"></div>
      <div class="skeleton-text short"></div>
    </div>
  </div>
</template>

<style scoped lang="less">
.article-skeleton {
  padding: 20px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.8);

  .skeleton-header {
    margin-bottom: 16px;

    .skeleton-title {
      height: 24px;
      width: 70%;
      background: #f0f0f0;
      border-radius: 4px;
      animation: pulse 1.5s infinite;
    }

    .skeleton-meta {
      display: flex;
      margin-top: 12px;
      gap: 12px;

      .skeleton-tag {
        height: 16px;
        width: 60px;
        background: #f0f0f0;
        border-radius: 4px;
        animation: pulse 1.5s infinite;
      }

      .skeleton-date {
        height: 16px;
        width: 100px;
        background: #f0f0f0;
        border-radius: 4px;
        animation: pulse 1.5s infinite;
      }
    }
  }

  .skeleton-content {
    .skeleton-text {
      height: 16px;
      width: 100%;
      background: #f0f0f0;
      border-radius: 4px;
      margin-bottom: 12px;
      animation: pulse 1.5s infinite;

      &.short {
        width: 60%;
      }
    }
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
</style>
